<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>opacity</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*  盒子的不透明度*/
        opacity: 0.5;
      }
      .father {
          position: relative;
      }
      img {
          width: 400px;
      }
      h2 {
          position: absolute;
          top:100px;
          left: 0;
          background-color: orange;
          width: 400px;
          text-align: center;
          line-height: 100px;
          opacity: 0.5;

      }
    </style>
</head>
<body>
  <div class="box">你好啊</div>
<!-- 做一个案例-->
  <div class="father">
      <img src="../images/你瞅啥.jpg" alt="">
      <h2>你瞅啥</h2>
  </div>  
</body>
</html>